import { defineStore } from 'pinia'
import { ref, shallowRef, defineAsyncComponent } from 'vue'

export const UseAppConfigStore = defineStore('AppConfig', () => {

    const Config = ref([{
        type: 'group',
        AddButtonComp: shallowRef(defineAsyncComponent(() => import('./Button/AddButton.vue'))),
        TreeComp: shallowRef(defineAsyncComponent(() => import('./Button/TreeComp.vue'))),
        ContentComp: '',
    }]);

    const TreeComp = ref({ group: shallowRef(Config.value[0].TreeComp), });
    const ContentComp = ref({})
    const TitleRightComp = ref({})

    const AddConfig = function (data) {
        TreeComp.value[data.type] = data.TreeComp;
        ContentComp.value[data.type] = data.ContentComp;
        TitleRightComp.value[data.type] = data.TitleRightComp;
        Config.value.push(data);
    };

    

    return { Config, AddConfig, TreeComp, ContentComp, TitleRightComp }
})